@import "~common/less/variables";
@import "~common/less/utils";

.level-link-tab{
  // padding-bottom: 0.8rem;
  position: absolute;
  top: 44px;
  bottom: 1.3rem;
  #w100;
  .list-container{
    #flex;
    #w100;
    #h100;
    .list-title{
      width: 22%;
      #h100;
      #borderRight-1px(@color-border-gray);
      padding-right: 1px;
      .list-wrapper{
        #tac;
        overflow-y: auto;
        #w100;
        #h100;
        li{
          position: relative;
          padding-top: 0.1rem;
          font-size: @font-size-medium;
          color: @color-lightblack;
          background-color: @color-theme;
          height: 1rem;
          span{
            #dib;
            #w100;
            height: 0.8rem;
            #lh0-8;
          }
        }
        .activeListTitle{
          #borderBottom-1px(@color-border-gray);
          #borderTop-1px(@color-border-gray);
          color: @color-black;
          background-color: @color-white;
          span:first-of-type{
            #fw;
            border-left: 0.1rem solid @color-blue;
          }
        }
      }
      .list-wrapper::-webkit-scrollbar{
        #hide-scroll;
      }
    }
    .list-content{
      position: relative;
      width: 78%;
      background-color: @color-white;
      .list-wrapper{
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        li{
          #dib;
          #tac;
          padding: 0 0.15rem;
          #lh1;
          color: @color-lightblack;
          font-size: @font-size-medium;
          #borderBottom-1px(@color-border-gray);
        }
        .activeContentTitle{
          color: @color-black;
          #fw;
        }
      }
      .list-wrapper::-webkit-scrollbar{
        #hide-scroll;
      }
    }
  }
}